<template>
  <div class="vant-time-range-picker">
    <div class="time-picker-row">
      <!-- 开始时间选择 -->
      <van-field
        v-model="startTime"
        :placeholder="startPlaceholder || $t('选择开始时间')"
        readonly
        @click="showStartPicker = true"
        class="time-field"
      />

      <!-- 结束时间选择 -->
      <van-field
        v-model="endTime"
        :placeholder="endPlaceholder || $t('选择结束时间')"
        readonly
        @click="showEndPicker = true"
        class="time-field"
      />
    </div>

    <!-- 开始时间选择器弹窗 -->
    <van-popup
      v-model="showStartPicker"
      position="bottom"
      :style="{ height: '80%' }"
    >
      <van-datetime-picker
        v-model="startDate"
        type="datetime"
        :min-date="minDate"
        :max-date="endDate || maxDate"
        :formatter="formatter"
        @confirm="handleStartConfirm"
        @cancel="showStartPicker = false"
      />
    </van-popup>

    <!-- 结束时间选择器弹窗 -->
    <van-popup
      v-model="showEndPicker"
      position="bottom"
      :style="{ height: '80%' }"
    >
      <van-datetime-picker
        v-model="endDate"
        type="datetime"
        :min-date="startDate"
        :max-date="maxDate"
        :formatter="formatter"
        @confirm="handleEndConfirm"
        @cancel="showEndPicker = false"
      />
    </van-popup>
  </div>
</template>
<script>
export default {
  name: 'VantTimeRangePicker',
  props: {
    // 绑定的时间范围值 [start, end]
    value: {
      type: Array,
      default: () => [],
    },
    // 最小可选日期
    minDate: {
      type: Date,
      default: () => new Date(2000, 0, 1),
    },
    // 最大可选日期
    maxDate: {
      type: Date,
      default: () => new Date(2100, 11, 31),
    },
    // 开始时间占位符
    startPlaceholder: String,
    // 结束时间占位符
    endPlaceholder: String,
    // 时间格式化字符串
    format: {
      type: String,
      default: 'yyyy-MM-dd HH:mm:ss',
    },
  },
  data() {
    return {
      // 开始时间选择器显示状态
      showStartPicker: false,
      // 结束时间选择器显示状态
      showEndPicker: false,
      // 开始时间日期对象
      startDate: null,
      // 结束时间日期对象
      endDate: null,
      // 开始时间格式化后的值
      startTime: '',
      // 结束时间格式化后的值
      endTime: '',
    }
  },
  watch: {
    // 监听value变化，同步到组件内部状态
    value: {
      immediate: true,
      handler(val) {
        if (Array.isArray(val) && val.length === 2) {
          this.startTime = val[0] || ''
          this.endTime = val[1] || ''
          this.startDate = val[0] ? new Date(val[0]) : null
          this.endDate = val[1] ? new Date(val[1]) : null
        }
      },
    },
  },
  methods: {
    // 格式化日期时间显示
    formatter(type, value) {
      switch (type) {
        case 'year':
          return this.$t('{value}年', { value: value })
        case 'month':
          return this.$t('{value}月', { value: value })
        case 'day':
          return this.$t('{value}日', { value: value })
        case 'hour':
          return this.$t('{value}时', { value: value })
        case 'minute':
          return this.$t('{value}分', { value: value })
        case 'second':
          return this.$t('{value}秒', { value: value })
        default:
          return value
      }
    },

    // 格式化日期为字符串
    formatDate(date) {
      if (!date) return ''
      const year = date.getFullYear()
      const month = String(date.getMonth() + 1).padStart(2, '0')
      const day = String(date.getDate()).padStart(2, '0')
      const hour = String(date.getHours()).padStart(2, '0')
      const minute = String(date.getMinutes()).padStart(2, '0')
      const second = String(date.getSeconds()).padStart(2, '0')

      // 根据format prop格式化输出
      return this.format
        .replace('yyyy', year)
        .replace('MM', month)
        .replace('dd', day)
        .replace('HH', hour)
        .replace('mm', minute)
        .replace('ss', second)
    },

    // 处理开始时间确认
    handleStartConfirm(date) {
      console.log('[ date ]-153', date)
      this.startDate = date
      this.startTime = this.formatDate(date)
      this.showStartPicker = false
      this.$emit('input', [this.startTime, this.endTime])
      this.$emit('change', [this.startTime, this.endTime])
    },

    // 处理结束时间确认
    handleEndConfirm(date) {
      // 验证结束时间是否晚于开始时间
      // if (this.startDate && date < this.startDate) {
      //   this.$emit('error', '结束时间不能早于开始时间');
      //   return;
      // }
      // this.endDate = date;
      // this.endTime = this.formatDate(date);
      // this.showEndPicker = false;
      // this.$emit('input', [this.startTime, this.endTime]);
      // this.$emit('change', [this.startTime, this.endTime]);
    },
  },
}
</script>
<style scoped>
.time-picker-row {
  display: flex;
  gap: 16px;
}

.time-field {
  flex: 1;
}
</style>
